<template>
<div class="bgc">
    <div class="clockcolor"></div>
    <div class="loginImg">
        <img class="bgImg" :src="bgImg">
    </div>
    <div class="login">
        <div class="loginTitle">
            <h1>解剖图谱管理系统</h1>
        </div>
        <div class="rowEditor">
            <el-input v-model="userCode" placeholder="请输入用户名"></el-input>
            <i class="fa fa-user-circle"></i>
        </div>
        <div class="rowEditor">
            <el-input v-model="userPwd" type="password" placeholder="请输入密码"></el-input>
            <i class="fa fa-user-circle"></i>
        </div>
        <div class="submit">
            <el-button type="primary" @click="checkLogin" style="width:100%">登录</el-button>
        </div>
    </div>
    
</div>
</template>

<script>
    export default {
        name:'login',
        mounted(){
            var me = this;
            try{
                console.log('login is load...');
                var comm = me.comm;
                console.log(comm);
            }catch(er){
                console.log(er);
            }
        },
        data(){
            return{
                userCode:'',
                userPwd:'',
                bgImg:require('@/assets/images/login.png')
            }
        },
        methods:{
            async checkLogin() {
                var me = this;
                const data = {
                    userID: me.userCode,
                    password: me.userPwd
                }
                const {data:res}= await me.$http.post('api/login', me.$qs.stringify(data))
                console.log(res)
                if(res.status==1){
                    this.$message({
                        type: 'warning',
                        message: res.message
                    });
                }
                if(res.status==0){
                    this.$message({
                        type: 'success',
                        message: res.message
                    });
                    window.sessionStorage.setItem('token', res.token);
                    console.log(me.userCode)
                    localStorage.setItem('id',me.userCode);
                    this.$router.push({
                    name:'home'
                })
                }
                
            }
        }
    }
</script>

<style lang="less" scoped>
    .bgc{
        position: fixed;
        height: 100%;
        width: 100%;
        background-color:#ADD8E6;
    }
    .loginImg{
        img{
                height: 500px;
                width: 400px;
                // opacity:0.9;
                border-radius: 4%;
            }
            
        position: fixed;
        left: 30%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .login{
        background-color: #fff;
        box-shadow: 0 0 10px #999;
        width: 400px;
        padding: 20px;
        position: fixed;
        left: 68%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 4%;
        .loginTitle{
            height: 80px;
            // position: relative;
            text-align: center;
            font-weight: bold;
            font-size: 1em;
            margin-top: 20px;
        }
        .rowEditor{
            position: relative;
            margin-bottom: 10px;
            i{
                position: absolute;
                left: 15px;
                top:13px
            }
            ::v-deep .el-input__inner{
                padding-left: 36px;
            }
        }

        .submit{
            margin: 20px 0;
        }
    }
    .clockcolor{
        background-color: #101238;
        width: 1200px;
        height: 450px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>